<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search mb-10">
        <el-col :span="18" class="breadcrumb-container input-val-box">
          <el-input v-model="editForm.materiel_name" placeholder="填写物料名称" size="small" class="w-200 mr-10"></el-input>
          <!--<el-input v-model="editForm.user_name" placeholder="填写领用人" size="small" class="w-200 mr-10"></el-input>-->
          <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
        </el-col>
        <el-col :span="6" class="breadcrumb-container input-val-box">
          <el-radio-group v-model="editForm.status" size="small" @change="changeTabFn">
            <el-radio-button :label="0">申请中({{tabTotal[0]}})</el-radio-button>
            <el-radio-button :label="1">已领用({{tabTotal[1]}})</el-radio-button>
          </el-radio-group>
        </el-col>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableStripe"
                  :border="tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c">
            <el-table-column
                    label="物料名称">
              <template slot-scope="scope">
                {{scope.row.materiel.name}}
              </template>
            </el-table-column>
            <el-table-column
                    label="领用人">
              <template slot-scope="scope">
                {{scope.row.user.realname}}
              </template>
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="申请用途">
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="申请时间">
            </el-table-column>
            <el-table-column
                    prop="examine_time"
                    label="领取时间"
                    :key="1"
                    v-if="editForm.status==1">
            </el-table-column>
            <el-table-column
                    :key="4"
                    prop="number"
                    label="领用数量"
                    width="90">
            </el-table-column>
            <el-table-column
                    :key="3"
                    label="领用状态"
                    width="80">
              <template slot-scope="scope">
                {{editForm.status==0?'申请中':'已领取'}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                layout="total, prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
  import {pagination} from '@/utils/util.js'
  import {mapGetters} from "vuex";

  export default {
    data () {
      return {
        radio1: 1,
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        editForm: {
          types: 1,
          type: 0,
          status: 0,
          p: 1,
          user_name: ''
        },
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [], // 数据列表
        tabTotal: [0, 0, 0] // 申请中 确认 取消
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    created () {
      this.editForm.user_id = this.userInfo.id
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        // types 	整型 	必填 	1 	- 	0进货1申请
        // type 0时间 1数量正序 2数量倒叙
        // status 	整型 	必填 	1 	- 	类型0申请1确认2取消
        this.editForm.p = this.page.pageindex
        this.$fetch(this.api.admin_materiel_log_index, this.editForm).then((response) => {
          if (response.code === 0) {
            let array_ = []
            for (let i in response.list.data) {
              response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
              if (this.editForm.status === 1) {
                response.list.data[i].examine_time = response.list.data[i].examine_time.split(' ')[0]
              }
              array_.push(response.list.data[i])
            }
            this.tabTotal = response.number
            this.arryList = array_
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      searchFn () {
        this.page.pageindex = 1
        this.InitFn()
      },
      changeTabFn () {
        this.page.pageindex = 1
        this.arryList = []
        this.InitFn()
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      // 刷新页面
      refreshFn () {
        this.page.pageindex = 1
        this.editForm.materiel_name = ''
        this.editForm.user_name = ''
        this.InitFn()
      }
    },
    mounted () {
    }
  }
</script>
